<template>
  <div class="radis-dialog">
    <el-button type="primary" size="small" @click="addTableData">
      新建
    </el-button>
  </div>

  <gz-table :config="config" class="gz-table">
    <template #handle="{ row: scope }">
      <el-button type="primary" size="small" @click="editTableList(scope)">
        编辑
      </el-button>
      <el-button type="danger" size="small" @click="removeTableList(scope)">
        删除
      </el-button>
    </template>
  </gz-table>

  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="300px">
    <el-form
      :model="tableForm"
      :rules="rules"
      ref="tableFormRef"
      label-width="80px"
    >
      <el-form-item label="键名" prop="key">
        <el-input
          v-model="tableForm.key"
          :disabled="dialogTitle == '编辑'"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label="值映射" prop="value">
        <el-input v-model="tableForm.value" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit"> 确 定 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import gzTable from "@/components/table/index.vue";

import { ref, reactive, toRefs } from "vue";
export default {
  components: { gzTable },
  setup() {
    const dialogTitle = ref("新建");
    const dialogVisible = ref(false);
    const tableFormRef = ref(null);
    const state = reactive({
      rules: {
        key: [{ required: true, message: "请输入键名", trigger: "blur" }],
        value: [{ required: true, message: "请输入值映射", trigger: "blur" }]
      },
      tableForm: {
        key: "",
        value: ""
      },
      config: {
        // 表格样式
        style: {
          stripe: true,
          border: true,
          maxHeight: 500
        },
        loading: false,
        // 列
        column: [
          {
            prop: "key",
            label: "键名",
            width: 105
          },
          {
            prop: "value",
            label: "值映射",
            width: 150
          },
          {
            type: "operate",
            label: "操作",
            width: 150,
            fixed: "right",
            slotName: "handle"
          }
        ],
        tableData: []
      }
    });
    // 新建
    const addTableData = () => {
      dialogVisible.value = true;
      vm.$nextTick(() => {
        tableFormRef.value.clearValidate();
      });
      dialogTitle.value = "新建";
      state.tableForm = {
        key: "",
        value: ""
      };
    };
    // 编辑列 表结构
    const editTableList = rowData => {
      dialogVisible.value = true;
      dialogTitle.value = "编辑";
      state.tableForm = vm.$tool.deepClone(rowData);
    };
    // 删除列 表结构
    const removeTableList = rowData => {
      // 获取当前列索引
      let findIndex = state.config.tableData.findIndex(
        tItem => tItem.key == rowData.key
      );
      if (findIndex > -1) {
        state.config.tableData.splice(findIndex, 1);
      }
    };
    const submit = () => {
      tableFormRef.value.validate(valid => {
        if (valid) {
          dialogVisible.value = false;
          // 新建/编辑
          if (dialogTitle.value == "新建") {
            state.config.tableData.push(state.tableForm);
          } else {
            let findIndex = state.config.tableData.findIndex(
              t => t.key == state.tableForm.key
            );
            if (findIndex > -1) {
              state.config.tableData[findIndex] = vm.$tool.deepClone(
                state.tableForm
              );
            }
          }
        } else {
          return false;
        }
      });
    };
    return {
      dialogTitle,
      dialogVisible,
      tableFormRef,
      ...toRefs(state),
      addTableData,
      editTableList,
      removeTableList,
      submit
    };
  }
};
</script>

<style  scoped>
.gz-table {
  margin-top: 15px;
}
</style>